<template>
  <div class="hand-sign-box" :class="{ disabled: disabled }" @click="openSignature">
    <el-link type="info" :underline="false" class="hand-sign" v-if="value == null || value === ''">
      <i class="el-icon-edit"></i>
      <span>添加签名</span>
    </el-link>
    <div class="sign-preview" v-else>
      <div class="preview-delete-icon" @click.stop="deleteSignature">
        <i class="el-icon-delete"></i>
      </div>
      <img :src="value" alt="签名" :style="{ height: this.height }" />
    </div>
  </div>
</template>

<script>
import SignaturePad from './signatureDlg.vue';

export default {
  name: 'OnlineSignature',
  props: {
    value: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    height: {
      type: [String, Number],
      default: '200px',
      required: false
    },
    backgroundColor: {
      type: String,
      required: false
    },
    penColor: {
      type: String,
      default: '#000000',
      required: false
    },
    autoTrim: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  methods: {
    openSignature() {
      if (this.disabled) return;
      this.$dialog
        .show(
          '手写签名',
          SignaturePad,
          {
            area: ['600px']
          },
          {
            value: this.value,
            width: '100%',
            height: '300px',
            // 自动裁剪到签名实际大小，默认为false，导出的图片会有空白
            autoTrim: this.autoTrim,
            backgroundColor: this.backgroundColor,
            penColor: this.penColor,
            debug: this.debug
          }
        )
        .then(res => {
          this.$emit('input', res.data);
          this.$emit('change', res.data);
        });
    },
    deleteSignature() {
      this.$confirm('确定要删除此签名吗？')
        .then(() => {
          this.$emit('input', undefined);
          this.$emit('change', undefined);
        })
        .catch(e => {});
    }
  }
};
</script>

<style scoped>
.hand-sign-box .hand-sign {
  width: 100%;
  background-color: #f7f7f7;
  text-align: left;
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
  padding: 0 10px;
}
.hand-sign-box .hand-sign i {
  margin-right: 4px;
  position: relative;
  top: 1px;
}
.hand-sign-box .hand-sign:hover {
  background-color: #efefef;
}
.hand-sign-box.disabled .hand-sign:hover {
  cursor: not-allowed;
}

.hand-sign-box .sign-preview {
  position: relative;
  min-height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid #dcdfe6;
  padding: 8px 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hand-sign-box .sign-preview img {
  max-width: 100%;
  cursor: pointer;
}
.hand-sign-box .sign-preview .preview-delete-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background-color: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  display: none;
}
.hand-sign-box .sign-preview .preview-delete-icon:hover {
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.hand-sign-box .sign-preview:hover .preview-delete-icon,
.hand-sign-box.is-mobile .preview-delete-icon {
  display: block;
}
.hand-sign-box.disabled .preview-delete-icon {
  display: none !important;
}
</style>
